<template>
  <view class="container">
    <YanxueTab :list="tabList" @change="tabChange" :current="currentIndex"></YanxueTab>

    <view class="box">
      <view class="info">
        <view class="yan-list">
          <view class="list_item" v-for="(item, index) in teach" :key="index">
            <view class="yan-top">
              <image :src="item.url" mode="widthFix" class="list_img"></image>
              <view class="list_text">
                <view class="title">{{ item.title }}</view>
                <view class="num">
                  <view>{{ item.time }}</view>
                </view>
              </view>
            </view>
            <view class="yan-bottom">
              <view class="yarn_left">
                <view class="avator">
                  <image
                    v-for="(img, index) in item.imgs"
                    :key="index"
                    :src="img"
                    mode="widthFix"
                    class="avator_img"
                  ></image>
                </view>
                <view class="num">
                  <text>98人已报名</text>
                </view>
              </view>
              <view class="btn">
                <text>加入我们</text>
                <view class="trangle"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import YanxueTab from "@/components/yanxue_tab";
export default {
  components: {
    YanxueTab,
  },
  data() {
    return {
      currentIndex: 0,
      teach: [
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban.png",
          title: "川美研学丨暑假第一期六天五晚",
          time: "2024/07/08-2024/07/14",
          imgs: [
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
          ],
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban.png",
          title: "川美研学丨暑假第一期六天五晚",
          time: "2024/07/08-2024/07/14",
          imgs: [
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
          ],
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban.png",
          title: "川美研学丨暑假第一期六天五晚",
          time: "2024/07/08-2024/07/14",
          imgs: [
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
          ],
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban.png",
          title: "川美研学丨暑假第一期六天五晚",
          time: "2024/07/08-2024/07/14",
          imgs: [
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
            "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_avator.png",
          ],
        },
      ],

      teach1: [
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban1.png",
          title: "川美研学丨乡土创意之旅",
          time: "2024/07/08-2024/07/14",
          num: 198,
          price: 998,
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban1.png",
          title: "川美研学丨乡土创意之旅",
          time: "2024/07/08-2024/07/14",
          num: 198,
          price: 998,
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban1.png",
          title: "川美研学丨乡土创意之旅",
          time: "2024/07/08-2024/07/14",
          num: 198,
          price: 998,
        },
        {
          url: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue_ban1.png",
          title: "川美研学丨乡土创意之旅",
          time: "2024/07/08-2024/07/14",
          num: 198,
          price: 998,
        },
      ],

      tabList: [
        {
          default: {
            title: "我的研学",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 80,
            height: 60,
          },
          active: {
            title: "我的研学",
            des: "近期12期",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 92,
            height: 68,
          },
        },
        {
          default: {
            title: "近期研学",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 80,
            height: 60,
          },
          active: {
            title: "近期研学",
            des: "近期12期",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 92,
            height: 68,
          },
        },
        {
          default: {
            title: "往期研学",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 80,
            height: 60,
          },
          active: {
            title: "往期研学",
            des: "近期12期",
            icon: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/yanxue.png",
            width: 92,
            height: 68,
          },
        },
      ],
    };
  },
  methods: {
    tabChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
}
.box {
  padding: 0 24rpx 100rpx;
}
.info {
  // margin-top: 46rpx;
  padding-top: 28rpx;

  .info-des {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      position: relative;

      text {
        font-family: HarmonyOS Sans SC;
        font-weight: 900;
        font-size: 38rpx;
        color: #000000;
        z-index: 100;
      }

      .shadow {
        margin-top: -12rpx;
        z-index: 99;
        width: 100%;
        height: 8rpx;
        background: #a2ff00;
      }
    }

    .des {
      display: flex;
      align-items: center;

      text {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        transform: scale(0.916667);
        color: #747474;
      }

      .point {
        position: relative;
        margin-left: 10rpx;
        width: 20rpx;
        height: 20rpx;
        background-color: #a2ff00;
        border-radius: 50%;

        .trangle {
          position: absolute;
          top: 4rpx;
          left: 4rpx;
          // transform: translate(-50%, -50%);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 13.856rpx solid #fff;
          transform: rotate(90deg);
        }
      }
    }
  }

  .yan-list {
    margin-top: 20rpx;

    .list_item {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      margin-right: 12rpx;

      .yan-top {
        .list_img {
          width: 626rpx;
          height: 268rpx;
          border-radius-top-left: 20rpx;
          border-radius-top-right: 20rpx;
          vertical-align: bottom;
        }

        .list_text {
          padding: 14rpx 24rpx 0 24rpx;
          height: 120rpx;
          background: linear-gradient(0deg, #facc22 0%, #f95513 100%);
          border-radius: 0px 0px 20rpx 20rpx;

          .title {
            font-family: HarmonyOS Sans SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #ffffff;
          }

          .num {
            margin-top: 22rpx;
            font-family: HarmonyOS Sans SC;
            font-size: 24rpx;
            color: #ffffff;
          }
        }
      }

      .yan-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;
        .yarn_left {
          display: flex;
          align-items: center;
          .avator {
            margin-top: 20rpx;

            .avator_img:not(:first-child) {
              margin-left: -22rpx;
            }

            .avator_img {
              width: 62rpx;
              height: 62rpx;
              border-radius: 50%;
            }
          }

          .num {
            width: 146rpx;
            height: 40rpx;
            background: #e9e9f0;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 18rpx;
            margin-left: 18rpx;
            text {
              font-family: HarmonyOS Sans SC;
              font-size: 24rpx;
              color: #353535;
              text-align: center;
              line-height: 40rpx;
              transform: scale(0.75);
            }
          }
        }

        .btn {
          width: 166rpx;
          height: 72rpx;
          background: #a2ff00;
          border-radius: 36rpx;
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #030400;
          line-height: 72rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .trangle {
            // left: 1rpx;
            // transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 8rpx solid transparent;
            border-right: 8rpx solid transparent;
            border-bottom: 14.248rpx solid #000;
            transform: rotate(90deg);
            margin-left: 8rpx;
          }
        }
      }
    }
  }
  .yan-list_v2 {
    margin-top: 20rpx;

    .list_item {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;

      .yan-left {
        .list_img {
          width: 152rpx;
          height: 184rpx !important;
          border-radius: 8rpx;
          vertical-align: bottom;
          object-fit: cover;
        }
      }

      .yan-center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 20rpx;
        width: 100%;

        .list_text {
          .title {
            font-family: HarmonyOS Sans SC;
            font-weight: bold;
            font-size: 28rrpx;
            color: #000000;
          }

          .num {
            width: 146rpx;
            height: 40rpx;
            background: #e9e9f0;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 18rpx;
            text {
              font-family: HarmonyOS Sans SC;
              font-size: 24rpx;
              color: #353535;
              text-align: center;
              line-height: 40rpx;
              transform: scale(0.75);
            }
          }

          .price {
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            .price_num {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 48rpx;
              color: #f95513;
              margin-right: 4rpx;
            }
            .text {
              font-family: HarmonyOS Sans SC;
              font-size: 24rpx;
              color: #f95513;
              transform: scale(0.833333);
            }
          }
        }

        .yan-right {
          .rank {
            // width: 110rpx;
            // height: 56rpx;
            // background: #F95513;
            // border-radius: 20rpx 20rpx 0px 0px;
            // margin: 0 auto;
            margin-bottom: 48rpx;
            position: relative;
            image {
              width: 172rpx;
              height: 74rpx;
            }
            .rank_main {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #ffffff;
              text-align: center;
              line-height: 56rpx;
              position: absolute;
              bottom: 18rpx;
              left: 48rpx;
            }

            // .shadow {
            //     margin-top: -12rpx;
            //     width: 100%;
            //     height: 8rpx;
            //     background: #A2FF00;
            // }
          }

          .btn {
            width: 166rpx;
            height: 72rpx;
            background: #a2ff00;
            border-radius: 36rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #030400;
            line-height: 72rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .trangle {
              width: 0;
              height: 0;
              border-left: 8rpx solid transparent;
              border-right: 8rpx solid transparent;
              border-bottom: 14.248rpx solid #000;
              transform: rotate(90deg);
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }
}
</style>
